<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的删除和插入操作</title>
		<!-- 元素删除和插入操作：针对  元素 增删改
		append()		功能：在匹配元素集合中所有元素的每部末尾插入元素
		prepend()		功能：在匹配元素集合中所有元素的每部开头插入元素
		
		after()			功能：在匹配元素集合中所有元素的外部后面插入内容
		before()		功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()		功能：使用前提：元素内容，删除元素
		empty()			功能：使用前提：元素内容，清空元素
		
		replaceWith()
		 
		 -->
		 <style>
			 button{
				 margin: 5px;
				 padding: 8px 15px;
				 cursor: pointer;
			 }
			 body{
				 margin: 20px;
			 }
			 #target{
				 border: 1px solid red;
				 border-radius: 5px;
				 padding: 10px;
				 margin-top: 10px;
				 
			 }
			
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 7个按钮 div套p-->
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落--</p>
		</div>
		<!-- 2.替换和插入的元素块区域		隐藏 -->
		<div id="newElement" style="display: none;">
			<p>这是插入和替换的元素块段落</p>
		</div>
		<!-- css  button添加样式:外边距：5px 内边距：8px 15px 、手指cursor:pointer
				  body添加样式：外边距20px
				  target添加样式：1px边框，基础倒角，内外距：10px
								 上外边距：10px
			jq框架引入
		-->
		<script>
		/* 1.点击  内部末尾插入  按钮  实现，选框内末尾插入新元素 */
		$("#appendBtn").click(function(){
			//插入新增元素，---1.1创建新元素--复制新元素 clone()
			//根据抓到元素--复制出新元素---包含原有属性和样式
			var nw=$("#newElement").clone();
			//复制div加p空间元素，含原有属性---显示 display:block
			nw.css("display","block");
			//1.3 复制新元素并且改变属性【显示】，插入内部尾部
			$("#target").append(nw);
		});
		/* 2.点击  内部开头插入  按钮  实现，选框内开头插入新元素 */
		$("#prependBtn").click(function(){
			//插入新增元素，---1.1创建新元素--复制新元素 clone()
			//根据抓到元素--复制出新元素---包含原有属性和样式
			var bb=$("#newElement").clone();
			//复制div加p空间元素，含原有属性---显示 display:block
			bb.css("display","block");
			//1.3 复制新元素并且改变属性【显示】，插入内部尾部
			$("#target").prepend(bb);
		});
		/* 3.点击  外部后面插入  按钮  实现  选框外后面插入新元素 */
		$("#afterBtn").click(function(){
			//插入新增元素，---1.1创建新元素--复制新元素 clone()
			//根据抓到元素--复制出新元素---包含原有属性和样式
			var aa=$("#newElement").clone();
			//复制div加p空间元素，含原有属性---显示 display:block
			aa.css("display","block");
			//1.3 复制新元素并且改变属性【显示】，插入内部尾部
			$("#target").after(aa);
		});
		/* 3.点击  外部前面插入  按钮  实现  选框外前面插入新元素 */
		$("#beforeBtn").click(function(){
			//插入新增元素，---1.1创建新元素--复制新元素 clone()
			//根据抓到元素--复制出新元素---包含原有属性和样式
			var cc=$("#newElement").clone();
			//复制div加p空间元素，含原有属性---显示 display:block
			cc.css("display","block");
			//1.3 复制新元素并且改变属性【显示】，插入内部尾部
			$("#target").before(cc);
		});
		$("#beforeBtn").click(function(){
			//插入新增元素，---1.1创建新元素--复制新元素 clone()
			//根据抓到元素--复制出新元素---包含原有属性和样式
			var cc=$("#newElement").clone();
			//复制div加p空间元素，含原有属性---显示 display:block
			cc.css({"display":"block",
					"width":"200px",
					"height":"200px",
					"background":"#e4393c",
					"color":"transparent",
					"border-radius":"50%",
					"background-image":"url(../img/2.png)"
			});
			//1.3 复制新元素并且改变属性【显示】，插入内部尾部
			$("#target").before(cc);
		});
		/* 5.点击  删除和清空元素  按钮：真实删除  */
		$("#removeBtn").click(function(){
			$("#target").remove();
		});
		$("#emptyBtn").click(function(){
			$("#target").empty();
		});
		//6.点击  替换元素 按钮   将当前效果替换为新效果
		$("#replaceWithBtn").click(function(){
			//克隆  新元素效果
			var c=$("#newElement").clone().css("display","block");
			$("#target").replaceWith(c);
		});
		</script>
	</body>
</html>